<app-notification-provider-base
  [visible]="visible"
  modalTitle="Configure ntfy Provider"
  [saving]="saving"
  [testing]="testing"
  [editingProvider]="editingProvider"
  (save)="onSave($event)"
  (cancel)="onCancel()"
  (test)="onTest($event)"
>
  <!-- Provider-specific configuration goes here -->
  <div slot="provider-config">
    <!-- Server URL -->
    <div class="field">
      <label for="server-url">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.serverUrl')"
        ></i>
        Server URL *
      </label>
      <input
        id="server-url"
        type="url"
        pInputText
        [formControl]="serverUrlControl"
        placeholder="https://ntfy.sh"
        class="w-full"
      />
      <small *ngIf="hasFieldError(serverUrlControl, 'required')" class="form-error-text">Server URL is required</small>
      <small *ngIf="hasFieldError(serverUrlControl, 'invalidUri')" class="form-error-text">Must be a valid URL</small>
      <small *ngIf="hasFieldError(serverUrlControl, 'invalidProtocol')" class="form-error-text">Must use http or https protocol</small>
      <small class="form-helper-text">The URL of your ntfy server. Use https://ntfy.sh for the public service or your self-hosted instance.</small>
    </div>

    <!-- Topics -->
    <div class="field">
      <label for="topics">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.topics')"
        ></i>
        Topics *
      </label>
      <!-- Mobile-friendly autocomplete (chips UI) -->
      <app-mobile-autocomplete
        [formControl]="topicsControl"
        placeholder="Enter topic names"
      ></app-mobile-autocomplete>

      <!-- Desktop autocomplete (allows multiple entries) -->
      <p-autocomplete
        id="topics"
        [formControl]="topicsControl"
        multiple
        fluid
        [typeahead]="false"
        placeholder="Add a topic and press Enter"
        class="desktop-only w-full"
      ></p-autocomplete>

      <small *ngIf="hasFieldError(topicsControl, 'required')" class="form-error-text">At least one topic is required</small>
      <small *ngIf="hasFieldError(topicsControl, 'minlength')" class="form-error-text">At least one topic is required</small>
      <small class="form-helper-text">Enter the ntfy topics you want to publish to. Press Enter or comma to add each topic.</small>
    </div>

    <!-- Authentication Type -->
    <div class="field">
      <label for="auth-type">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.authenticationType')"
        ></i>
        Authentication Type *
      </label>
      <p-select
        id="auth-type"
        [formControl]="authenticationTypeControl"
        [options]="authenticationOptions"
        optionLabel="label"
        optionValue="value"
        class="w-full"
        [showClear]="false"
      ></p-select>
      <small *ngIf="hasFieldError(authenticationTypeControl, 'required')" class="form-error-text">Authentication type is required</small>
      <small class="form-helper-text">Choose how to authenticate with the ntfy server.</small>
    </div>

    <!-- Username (conditional on Basic Auth) -->
    <div class="field" *ngIf="currentAuthType === NtfyAuthenticationType.BasicAuth">
      <label for="username">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.username')"
        ></i>
        Username *
      </label>
      <input
        id="username"
        type="text"
        pInputText
        [formControl]="usernameControl"
        placeholder="Enter username"
        class="w-full"
        autocomplete="username"
      />
      <small *ngIf="hasFieldError(usernameControl, 'required')" class="form-error-text">Username is required for Basic Auth</small>
      <small class="form-helper-text">Your username for basic authentication.</small>
    </div>

    <!-- Password (conditional on Basic Auth) -->
    <div class="field" *ngIf="currentAuthType === NtfyAuthenticationType.BasicAuth">
      <label for="password">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.password')"
        ></i>
        Password *
      </label>
      <input
        id="password"
        type="password"
        pInputText
        [formControl]="passwordControl"
        placeholder="Enter password"
        class="w-full"
        autocomplete="current-password"
      />
      <small *ngIf="hasFieldError(passwordControl, 'required')" class="form-error-text">Password is required for Basic Auth</small>
      <small class="form-helper-text">Your password for basic authentication.</small>
    </div>

    <!-- Access Token (conditional on Access Token) -->
    <div class="field" *ngIf="currentAuthType === NtfyAuthenticationType.AccessToken">
      <label for="access-token">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.accessToken')"
        ></i>
        Access Token *
      </label>
      <input
        id="access-token"
        type="password"
        pInputText
        [formControl]="accessTokenControl"
        placeholder="Enter access token"
        class="w-full"
      />
      <small *ngIf="hasFieldError(accessTokenControl, 'required')" class="form-error-text">Access token is required</small>
      <small class="form-helper-text">Your access token for bearer token authentication.</small>
    </div>

    <!-- Priority -->
    <div class="field">
      <label for="priority">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.priority')"
        ></i>
        Priority *
      </label>
      <p-select
        id="priority"
        [formControl]="priorityControl"
        [options]="priorityOptions"
        optionLabel="label"
        optionValue="value"
        class="w-full"
        [showClear]="false"
      ></p-select>
      <small *ngIf="hasFieldError(priorityControl, 'required')" class="form-error-text">Priority is required</small>
      <small class="form-helper-text">The priority level for notifications (1=min, 5=max).</small>
    </div>

    <!-- Tags -->
    <div class="field">
      <label for="tags">
        <i
          class="pi pi-question-circle field-info-icon"
          title="Click for documentation"
          (click)="openFieldDocs('ntfy.tags')"
        ></i>
        Tags (Optional)
      </label>
      <!-- Mobile-friendly autocomplete (chips UI) -->
      <app-mobile-autocomplete
        [formControl]="tagsControl"
        placeholder="Enter tag names"
      ></app-mobile-autocomplete>

      <!-- Desktop autocomplete (allows multiple entries) -->
      <p-autocomplete
        id="tags"
        [formControl]="tagsControl"
        multiple
        fluid
        [typeahead]="false"
        placeholder="Add a tag and press Enter"
        class="desktop-only w-full"
      ></p-autocomplete>

      <small class="form-helper-text">Optional tags to add to notifications (e.g., warning, alert). Press Enter or comma to add each tag.</small>
    </div>
  </div>
</app-notification-provider-base>
